﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>基础框架平台服务前端预览中心-单表服务</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="bootstrap/css/bootstrap-table.css" rel="stylesheet" />
    <link href="bootstrap/css/bootstrap-table-fixed-columns.css" rel="stylesheet" />
    <link href="bootstrap/css/bootstrap-editable.css" rel="stylesheet" />
    <link href="bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <link href="css/docs.css" rel="stylesheet" />
    <link href="css/pygments-manni.css" rel="stylesheet" />
    <style>
        .fixed-table-body{
            max-height: calc(100vh
            - 285px
            ); 
        }
    </style>
</head>
<body style="background-color: #F1F3FA;">
    <nav class="navbar navbar-default" style="margin-top:5px; margin-bottom:5px;">
        <div class="container-fluid">
            <div class="navbar-header" style="font-size:16px; padding-top:8px;">
                <span style="font-size: 23px; border: solid 1px #DDDDDD; padding:0px 5px; margin-right:25px; float:left;">单表查询服务</span>
                <span id="sp_seviceUrl" style="float:left; padding-top:6px; font-size:15px;"></span>
            </div>
        </div>
    </nav>
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">单表预览</a></li>
        <!-- <li role="presentation"><a href="#field" aria-controls="profile" role="tab" data-toggle="tab">字段预览</a></li> -->
        <!-- <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">数据预览</a></li> -->
        <li role="presentation"><a href="#serviceAPI" aria-controls="profile" role="tab" data-toggle="tab">服务调用API</a></li>
        <li role="presentation"><a href="#serviceInformationAPI" aria-controls="profile" role="tab" data-toggle="tab">服务配置API</a></li>
    </ul>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="home">
            <div class="panel panel-primary">
                <div class="panel-heading">单表预览</div>
                <div class="panel-body">
                    <div class="container-fluid">
                        <div id="toolbar" class="form-inline">
                            <div id="txtSearch" class="form-group">
                            </div>
                            <button id="btn_search" type="button" class="btn btn-success">查询</button>
                            <!-- <button id="btn_add" type="button" class="btn btn-primary">添加</button>
                            <button id="btn_edit" type="button" class="btn btn-info">修改</button>
                            <button id="btn_del" type="button" class="btn btn-danger">删除</button> -->
                        </div>
                        <div style="overflow-y:scroll; ">

                            <table id="tb_list"></table>

                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div role="tabpanel" class="tab-pane fade " id="serviceInformationAPI">
            <div class="panel panel-primary">
                <div class="panel-heading">服务信息API</div>
                <div id="tb_data" class="panel-body">
                    <h4>响应数据列字段信息</h4>
                    <div class="bs-callout bs-callout-warning">
                        <h4>服务地址</h4>
                        <p id="queryShowField" >
                        	<a href=""  target="_blank"><span class="p_url"></span></a>
                        </p>
                    </div>
                    <div class="bs-callout bs-callout-info">
                        <h4>参数说明</h4>
                        <table id="tb_field"></table>
                    </div>


                    <h4>请求条件列字段信息</h4>
                    <div class="bs-callout bs-callout-warning">
                        <h4>服务地址</h4>
                        <p id="QueryField" >
                        	<a href=""  target="_blank"><span class="p_url"></span></a>
                        </p>
                    </div>
                    <div class="bs-callout bs-callout-info">
                        <h4>参数说明</h4>
                        <table id="tb_fieldCondition"></table>
                    </div>

                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane fade " id="serviceAPI">
            <div class="panel panel-primary">
                <div class="panel-heading">单表服务API</div>
                <div id="tb_data" class="panel-body">
                    <h4>分页查询数据服务</h4>
                    <div class="bs-callout bs-callout-warning">
                        <h4>服务地址</h4>
                        <p  id="querySingleTB">
                        	<a href=""  target="_blank"><span class="p_url"></span></a>
                        </p>
                    </div>
                    <div class="bs-callout bs-callout-info">
                        <h4>参数说明</h4>
                        <table class="table table-bordered table-striped js-options-table">
                            <thead>
                                <tr>
                                    <th width="15%" >名称</th>
                                    <th width="5%">类型</th>
                                    <th width="30%">说明</th>
                                    <th width="50%">输入参数值</th>
                                </tr>
                            </thead>
                            <tbody id="inputParameterList">
                                <tr>
                                    <td>serviceID</td>
                                    <td>String</td>
                                    <td>服务ID</td>
                                    <td>
                                        <input type="text" id="input_serviceId" style="width:100%" ></input>
                                    </td>
                                </tr>
                                
                                  <tr>
                                      <td>appCode</td>
                                      <td>String</td>
                                      <td>调用方appCode</td>
                                      <td>
                                          <select id="input_appCode" class="form-control input-inline input-medium">
                                              <option value="">请选择调用方</option>
                                              <option :value="item.code" v-for="item in dic.appCodeDic">{{item.name}}</option>
                                          </select>
<!--                                          <input type="text" id="input_appCode" style="width:100%"></input>-->
                                      </td>
                                  </tr>
                                
                                <tr>
                                    <td>pageNO</td>
                                    <td>int</td>
                                    <td>当前页数,从1开始(默认值1)</td>
                                    <td>
                                        <input type="text" id="input_pageNO" style="width:100%"></input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>pageSize</td>
                                    <td>int</td>
                                    <td>页大小(默认值10)</td>
                                    <td>
                                        <input type="text" id="input_pageSize" style="width:100%"></input>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="bs-callout bs-callout-info">
                        <button id="btn_executeBusinessService">模拟请求</button>
                    </div>


                    <div class="bs-callout bs-callout-info">
                        <h4>模拟请求的完整URL地址</h4>
                        <p id="completeUrl"></p>

                        <h4>模拟请求的代码</h4>

                        <figure class="highlight">
                            <pre>
                                <code class="language-js" data-lang="js" id="generateJsCode"></code>
                            </pre>
                        </figure>

                        <h4>模拟请求的执行结果</h4>
                        <pre id="displayJsCodeResponse"></pre>

                    </div>

                </div>
            </div>
        </div>


    </div>

    <!-- Begin数据维护modal -->
    <div id="EditContent" class="modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">数据维护</h4>
                </div>
                <div class="modal-body">
                    <div class="scroller" style="height:300px" data-always-visible="1" data-rail-visible1="1">
                        <div id="editTxt" class="form-horizontal form-body">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn default">关闭</button>
                    <button id="btn_save" type="button" class="btn blue">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- End数据维护modal -->
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/bootstrap-table.min.js"></script>
    <script src="bootstrap/js/bootstrap-table-zh-CN.js"></script>
    <script src="bootstrap/js/bootbox.min.js"></script>
    <script src="bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script src="bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="js/services/serviceConfig.js"></script>
    <script src="js/services/singleTableServices.js"></script>
    <script src="js/docs.js"></script>
    <script src="../metronic/assets/vue/vue@2.js" type="text/javascript"></script>
    <script type="application/javascript">


        var app = new Vue({
            el: '#serviceAPI',
            data: {
                dic: {
                    appCodeDic: [
                        {code: '',name :''},
                    ]
                },
            },
            computed: {},

            created: function () {
            },

            mounted: function () {
                var _this = this;
                var Request = GetRequest();
               //this.dic.appCodeDic=[];
                $.ajax({
                    type: 'POST',
                    url: postPath + '/accesscontrol/appserviceaccessconfig/getDataList',
                    data: {serviceId: Request["serviceID"]},
                    success: function (res) {

                        var newArr = [];
                        if (res && res.data) {
                            for (var i = 0; i < res.data.length; i++) {
                                newArr.push({code: res.data[i].appCode, name: res.data[i].appCode});
                            }
                        }
                        _this.dic.appCodeDic = newArr;
                    }
                });

            },
            methods: {

            }

        });
    </script>

</body>
</html>
